Vue.createApp({
    data() {
        return{
            arr:[
                {
                    userId:1,
                    userName:'张三',
                    userAge:20
                },{
                    userId:2,
                    userName:'李四',
                    userAge:21
                },{
                    userId:3,
                    userName:'王五',
                    userAge:22
                }
            ],
            inUserName : '',
            inUserAge : ''
        }
    },
    methods:{
        add(){
            let userId = 0;
            if(this.arr.length === 0){
                userId = 1;
            }else {
                userId = this.arr[this.arr.length - 1].userId + 1;
            }
            this.arr.push({
                userId:userId,
                userName:this.inUserName,
                userAge:this.inUserAge
            });
            this.inUserName = ''
            this.inUserAge = ''
        },
        del(index){
            this.arr.splice(index,1);
            for (let i = index; i < this.arr.length; i++) {
                this.arr[i].userId --;
            }
        },
        clear() {
            this.arr.splice(0,this.arr.length);
        }
    }
}).mount('#app')